<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 100px auto;
				text-align: center;
				line-height: 200px;
				/* box-shadow: 10px 10px 10px 0px black ;
				 */
				color: yellow;
				box-shadow: 10px 10px 10px;
				}
				
				.box2{
					width: 200px;
					height: 200px;
					background-color: red;
					margin: 100px auto;
					text-align: center;
					line-height: 200px;
					text-shadow: 10px 10px 2px black;
				}
			}
		</style>
	</head>
	<body>
		<!-- 
		 如何给盒子添加引用
		 box-shadow  h-shadow v-shadow blur spread color inset;
					 水平偏移  垂直偏移  模糊度 阴影扩展 阴影颜色 内外阴影
		 
		 盒子的阴影分为 内外阴影
		 默认情况下就是外阴影  inset 内阴影
		 
        box-shadow: 10px 10px 10px 0px black ;
		 
		 快速简写 box-shadow: 10px 10px 10px;
		 默认阴影的颜色是根据盒子里面的内容来决定的
		 
		 
		 
		 如何给文字添加阴影
		 text-shadow  h-shadow v-shadow blur   color ;
		 					 水平偏移  垂直偏移  模糊度 阴影颜色  
		 
		 -->
		 <div class="box1">我是一个盒子</div>
		 
		 <div class="box2">我是一个文字</div>
	</body>
</html>